export default {
  data() {
    return {
      isOpen: false,
      recorder: null,
      allChunks: [],
      drawArray: [],
      showDataAvailable: false,
      format: 'video/webm;codecs=vp9',
      canvas: null
    };
  },
  methods: {
    videotape() { // 录像
      if (this.isOpen) {
        this.isOpen = false;
        this.recorder.stop();
        this.blobDownload('video');
      } else {
        this.isOpen = true;
        var video = document.getElementById('camVideo');
        this.playCanvas(video);
        this.setRecorder();
        this.setFormatSelect(this.format);
        this.recorder.start(10);
      }
    },

    playCanvas(srcvideo) {
      // devicePixelRatio当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率
      const dpr = window.devicePixelRatio || 1;
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      canvas.width = window.innerWidth * 2;
      canvas.height = window.innerHeight * 2;
      this.canvas = canvas;
      context.drawImage(srcvideo, 0, 0, canvas.width, canvas.height);
      context.scale(dpr, dpr);
      requestAnimationFrame(() => {
        // 请求动画帧,由系统决定回调函数的执行时机
        this.playCanvas(srcvideo);
      });
    },
    setRecorder(format) {
      const stream = this.canvas.captureStream(60); // 60 FPS recording
      this.recorder = new MediaRecorder(stream, {
        mimeType: format
      });
      this.recorder.ondataavailable = e => {
        if (this.showDataAvailable) {
          console.log('trigger ondataavailable');
        }
        this.allChunks.push(
          e.data
        );
      };
    },
    setFormatSelect(format) {
      if (!MediaRecorder.isTypeSupported(format)) {
        console.log('当前浏览器不支持该编码类型', format);
        return;
      }
      this.allChunks = [];
      this.setRecorder(format);
    },
    blobDownload(type, picurl) {
      const link = document.createElement('a');
      link.style.display = 'none';
      if (type == 'video') {
        const fullBlob = new Blob(this.allChunks);
        const downloadUrl = window.URL.createObjectURL(fullBlob);
        link.href = downloadUrl;
        link.download = 'media - ' + this.format + '.mp4';
      } else {
        link.href = picurl;
        link.download = 'capture.png';
      }
      document.body.appendChild(link);
      link.click();
      link.remove();
    },

    capture() {
      var canvas = document.getElementById('canvas');
      canvas.width = 304 * 2;
      canvas.height = 214 * 2;
      var video = document.getElementById('camVideo');
      var context = canvas.getContext('2d');
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      const dataUrl = context.canvas.toDataURL('image/png');
      console.log('打印抓拍到的图片：', dataUrl);
      this.blobDownload('picture', dataUrl);
      return dataUrl;
    },

    // 获取canvas应该放大的倍数的方法；
    getPixelRatio(context) {
      var backingStore = context.backingStorePixelRatio ||
      context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio || 3;
      return (window.devicePixelRatio || 3) / backingStore;
    }
  }
};
